import React, { ReactNode, CSSProperties, HTMLAttributes } from "react"

/**
 * @title Menu
 */
export interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
    children?: ReactNode;
    style?: CSSProperties;
    className?: string | string[];
    isMenu?: boolean;
    prefixCls?: string;
    inDropdown?: boolean;

    /**
     * @zh 菜单风格
     * @defaultValue light
     */
    theme?: 'light' | 'dark';
    /**
     * @zh 菜单类型，目前支持垂直（vertical）、水平菜单（horizontal）、弹出（pop）
     * @defaultValue vertical
     */
    mode?: 'vertical' | 'horizontal' | 'pop' | 'popButton';
    /**
     * @zh 层级之间的缩进量
     */
    levelIndent?: number;
    /**
     * @zh 用于定制图标
     */
    icons?: {
        horizontalArrowDown?: ReactNode | null;
        popArrowRight?: ReactNode | null;
        collapseDefault?: ReactNode | null;
        collapseActive?: ReactNode | null;
    };
    /**
     * @zh 默认展开所有多级菜单
     */
    autoOpen?: boolean;
    /**
     * @zh 是否水平折叠收起菜单
     */
    collapse?: boolean;
    /**
     * @zh 开启手风琴效果
     */
    accordion?: boolean;
    /**
     * @zh 菜单选项是否可选
     * @defaultValue true
     */
    selectable?: boolean;
    /**
     * @zh 水平菜单是否自动溢出省略
     * @defaultValue true
     */
    ellipsis?: boolean;
    /**
     * @zh 是否自动滚动选中项目到可见区域
     */
    autoScrollIntoView?: boolean;
    /**
     * @zh 是否内置折叠按钮
     */
    hasCollapseButton?: boolean;
    /**
     * @zh 初始选中的菜单项 key 数组
     */
    defaultSelectedKeys?: string[];
    /**
     * @zh 初始展开的子菜单 key 数组
     */
    defaultOpenKeys?: string[];
    /**
     * @zh 选中的菜单项 key 数组（受控模式）
     */
    selectedKeys?: string[];
    /**
     * @zh 展开的子菜单 key 数组（受控模式）
     */
    openKeys?: string[];
    /**
     * @zh 点击菜单项的回调
     */
    onClickMenuItem?: (key: string, event, keyPath: string[]) => any;
    /**
     * @zh 点击子菜单标题的回调
     */
    onClickSubMenu?: (key: string, openKeys: string[], keyPath: string[]) => any;
    /**
     * @zh 折叠状态改变时的回调
     */
    onCollapseChange?: (collapse: boolean) => void;
    /**
     * @zh 水平菜单自动超出省略发生变化时的回调
     */
    onEllipsisChange?: (status: { lastVisibleIndex: number; overflowNodes: ReactNode[] }) => void;
    /**
     * @zh 滚动到可见区域的配置项，接收所有scroll-into-view-if-needed的参数
     */
    scrollConfig?: { [key: string]: any };
    /**
     * @zh 弹出模式下可接受所有 Trigger 的 Props
     */
    triggerProps?: Object;
    /**
     * @zh 弹出模式下可接受所有 ToolTip 的 Props
    */
    tooltipProps?: Object;
}

/**
 * @title Menu.SubMenu
 */
export interface MenuSubMenuProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "className"> {
    children?: ReactNode;
    style?: CSSProperties;
    className?: string | string[];
    level?: number;
    /**
     * @zh props.key
     */
    _key?: string;
    /**
     * @zh 子菜单的标题
     */
    title?: string | ReactNode;
    /**
     * @zh 唯一标志
     */
    key: string;
    /**
     * @zh 是否将多级菜单头也作为一个菜单项，支持点击选中等状态。
     */
    selectable?: boolean;
    /**
     * @zh 是否强制使用弹出模式，level 表示当前子菜单的层级
     */
    popup?: boolean | ((level: number) => boolean);
    /**
     * @zh 弹出模式下可接受所有 Trigger 的 Props
     */
    triggerProps: Object;
}

/**
 * @title Menu.ItemGroup
 */
export interface MenuItemGroupProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "className"> {
    children?: ReactNode;
    style?: CSSProperties;
    className?: string | string[];
    level?: number;
    /**
     * @zh props.key
     */
    _key?: string;
    title?: string | ReactNode;
}

/**
 * @title Menu.Item
*/
export interface MenuItemProps extends Omit<HTMLAttributes<HTMLElement>, "className"> {
    children?: ReactNode;
    style?: CSSProperties;
    className?: string | string[];
    level?: number;
    /**
     * @zh props.key
     */
    _key?: string;
    onClick?: (e) => void;
    /**
     * @zh 唯一标志
     */
    key: string;
    /**
     * @zh 菜单项禁止选中
     */
    disabled?: boolean;
    /**
     * @zh 配置最外层标签，可以是 html 标签或是组件
     * @defaultValue div
     */
    wrapper?: string | React.FC<any> | React.ComponentClass<any>;
    /**
     * @zh 菜单折叠时，指定在 Tooltip 中展示的菜单项节点
     */
    renderItemInTooltip?: () => ReactNode;
}